<!--
 * @Description: 物料配合比
-->
<template>
    <el-dialog :visible="visible" title="物料配合比" width="600px" @close="onClose" @open="onOpen">
        <div class="box">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="config.tableData" tooltip-effect="dark">
                <el-table-column
                    v-for="(item, index) in tableConfig" :key="index"
                    :label="item.label"
                    :prop="item.prop"
                    align="center" 
                    :width="item.width">
                    <template slot-scope="scope">
                        <template v-if="item.render">{{item.render(scope.row)}}</template>
                        <template v-else>{{ scope.row[item.prop] }}</template>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button class="bottom_all_two" @click="onClose">关 闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
    export default {
        data() {
            return {
                tableConfig: [
                    { label: '物料', prop: 'name'},
                    { label: '理论配合比', prop: ''},
                    { label: '实际耗用', prop: 'value'},
                ]
            };
        },
        props: {
            config: {
                type: Object,
                default: () => ({}),
            },
            visible: {
                type: Boolean,
            },
        },
        methods: {
            onOpen() {},
            onClose() {
                this.$emit("update:visible", false)
            },
        },
    };
</script>
<style lang="scss" scoped>
.box {
    max-height: 500px;
    overflow-y: auto;
    padding-right: 10px;
}
</style>